<template>
	<view class="container">
		<uni-nav-bar title="个人中心" fixed statusBar :border="false"></uni-nav-bar>
		<view class="backWrapper" :style="'top:' + statusbarHeight + 'px;'" />
		<view v-if="loginStatus">
			<view class="userInfo">
				<view class="userInfo-avatar">
					<cloud-image v-if="userInfo?.avatar_file?.url" :src="userInfo?.avatar_file?.url" mode="aspectFill"
						width="70px" height="70px"></cloud-image>
					<uni-icons v-else type="contact-filled" color='#b3b4b6' size="70"></uni-icons>
				</view>
				<text class="userInfo-userName">{{userInfo.nickname || '普通用户'}}</text>
			</view>
			<uni-list :border="false">
				<uni-list-item v-if="userInfo?.role?.includes('admin')" showArrow clickable link="navigateTo"
					to="../admin/index" :thumb="editIcon" title="控制台" />
				<uni-list-item showArrow clickable link="navigateTo" to="components/userInfo/userInfo"
					:thumb="loginStatus ? sexIcon : editIcon" title="编辑资料" />
				<uni-list-item v-if="phoneData.isOpen" showArrow clickable @click="handleCallMe" :thumb="callIcon"
					title="联系我们" />
				<uni-list-item v-if="loginStatus" showArrow clickable @click="handleLogout" :thumb="logoutIcon"
					title="退出登录" />
			</uni-list>
		</view>
		<button class="settingCard" v-else @click="handleLogin">
			点击登录
		</button>

		<uni-popup ref="logout" type="center" safeArea backgroundColor="#fff" borderRadius="6px 6px 6px 6px">
			<uni-popup-dialog @confirm="logoutConfirm">
				是否确定退出登录
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		reactive,
		ref
	} from 'vue';
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	import {
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import editIcon from '../../static/image/edit.png'
	import editManIcon from '../../static/image/editMan.png'
	import editWomanIcon from '../../static/image/editWoman.png'
	import callIcon from '../../static/image/call.png'
	import logoutIcon from '../../static/image/logout.png'
	import {
		univerifyStyle
	} from './config.js'

	const {
		proxy
	} = getCurrentInstance()

	const statusbarHeight = getApp().globalData.statusbarHeight + 44

	const userInfo = ref({})
	const loginStatus = ref(false)
	const phoneData = ref({
		data: '',
		isOpen: false
	})
	const sexIcon = ref(editManIcon) // 跟随性别变化的编辑信息图标

	/** 拨打电话 */
	const handleCallMe = () => {
		uni.makePhoneCall({
			phoneNumber: phoneData.value.data
		}).catch(err => console.warn(err))
	}

	// 退出登录
	const logoutConfirm = () => {
		mutations.logout()
	}

	// 退出登录
	const handleLogout = () => {
		proxy.$refs.logout.open()
	}

	const handleLogin = () => {
		uni.navigateTo({
			url: "/pages/personal/components/login/login-withoutpwd"
		})
	}

	const getPhoneData = async () => {
		try {
			const basicSetting = uniCloud.importObject('mall-basic-setting')
			const res = await basicSetting.getData({
				key: 'phone'
			})
			if (res?.data) {
				phoneData.value = res?.data
			}
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg)
		}
	}

	const getUser = async () => {
		let role = {}
		if (uni.getStorageSync('uni_id_token')) {
			role = await uniCloud.callFunction({
				name: 'getUserPermission',
			})
		}
		userInfo.value = {
			...store.userInfo,
			role: role?.result || []
		}
		loginStatus.value = store.hasLogin
		sexIcon.value = userInfo.value.sex === 0 ? editManIcon : editWomanIcon
		uni.stopPullDownRefresh()
	}

	const getData = () => {
		getPhoneData()
		getUser()
	}

	onPullDownRefresh(() => getData())
	onShow(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	@import url("../../styles/common.scss");

	.container {
		position: relative;
		min-height: 100vh;
		background-color: var(--background-color);
	}

	.backWrapper {
		position: fixed;
		left: 0;
		width: 100%;
		height: 200px;
		background-image: linear-gradient(90deg, #a6d4ff, #ffeca6);
		border-radius: 4px 4px 100% 100%;
		z-index: 0;
	}

	.userInfo {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: calc(var(--margin-vertical) * 3) var(--margin-horizontal) calc(var(--margin-vertical) * 2.2);

		&-avatar {
			width: 70px;
			height: 70px;
			border-radius: 100%;
			background-color: whitesmoke;
			margin-bottom: calc(var(--margin-vertical) * 1.75);
			z-index: 1;
			overflow: hidden;
		}

		&-userName {
			color: #333;
			z-index: 1;
		}
	}

	.settingCard {
		background-color: white;
		padding: 12px;
		text-decoration: underline;
		text-align: center;
		border-radius: 8px;
		margin: calc(var(--margin-vertical) * 2) var(--margin-horizontal);
	}
</style>